<template>
  <div>
    <template v-for="item in menue">
      <el-menu-item
        @click="clickMenu(item)"
        :index="item[props_.path]"
        :key="item[props_.id]"
        v-if="!item[props_.children]"
      >
        <i
          :class="
            /^iconfont/.test(item[props_.icon]) ? `iconfont ${item[props_.icon]}` : `el-icon-${item[props_.icon]}`
          "
          style="color: #999; font-size: 20px"
        ></i>
        <span class="text">{{ item[props_.text] }}</span>
      </el-menu-item>
      <el-submenu :index="item[props_.path]" :key="item[props_.id]" v-else>
        <template slot="title">
          <i
            style="color: #999; font-size: 20px"
            :class="
              /^iconfont/.test(item[props_.icon]) ? `iconfont ${item[props_.icon]}` : `el-icon-${item[props_.icon]}`
            "
          ></i>
          <span class="text">{{ item[props_.text] }}</span>
        </template>
        <baseMenue
          v-if="item[props_.children] && item[props_.children].length > 0"
          :menue="item[props_.children]"
          :props="props_"
        ></baseMenue>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'baseMenue',
  data() {
    return {
      props_: {
        text: 'text',
        path: 'path',
        pageUrl: 'pageUrl',
        id: 'id',
        icon: 'icon',
        children: 'children'
      }
    }
  },
  props: {
    props: {
      type: Object,
      default: function () {
        return {}
      }
    },
    menue: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  mounted() {
    for (const key in this.props) {
      this.props_[key] = this.props[key]
    }
  },
  methods: {
    clickMenu(item) {
      this.$store.commit('selectMenu', item)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu {
  border: none;
  h3 {
    color: #ffffff;
    text-align: center;
    line-height: 48px;
  }
}
.el-menu-item.is-active {
  .text,
  i {
    color: #409eff !important;
    font-weight: bold;
  }
}
.text {
  font-size: 18px;
  font-weight: 400;
  color: #999999;
  margin-left: 10px;
}
</style>
